<template>
  <div>
    <!--  -->
    <!-- 右边是所有采样人员 -->
    <div class="left">已有采样组
      <div v-for="item in allsamplingGroup" :key="item.groupId" class="leftContent">
        <div>
          组名 {{item.groupName}}
          <el-button
            style="float:right"
            type="danger"
            size="mini"
            @click="deleteGroup(item.groupId)"
          >删除</el-button>
        </div>
        <br>
        <div>组长:{{ item.leaderName}}</div>
        组员：{{item.memberName}}
      </div>
    </div>
    <div class="right">创建采样组
      <br>
      <el-button type="primary" @click="groupCreate" class="divCreate">立即创建</el-button>

      <el-input size="small" v-model="groupName" placeholder="组名" type="text">
        <template slot="prepend" style="width:30%">
          <el-button @click="groupTypeChange">{{!isTemporary?'永久':'临时'}}</el-button>
        </template>
      </el-input>
      <el-input placeholder="请输入内容" disabled size="small" v-model="groupLeader">
        <template slot="prepend" style="width:30%">组长</template>
      </el-input>
      <div class="divPeople">
        <el-checkbox-group v-model="selectedSamplingPeople" size="small">
          <el-checkbox
            :label="item.Id"
            v-for="item in allSamplingPeople"
            :key="item.Id"
            border
          >{{item.Name}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    groupLeader() {
      var Name
      if (this.selectedSamplingPeople != null) {
        this.allSamplingPeople.forEach(e => {
          e.Id === this.selectedSamplingPeople[0] ? (Name = e.Name) : ''
        })
      }
      return Name
      // return this.selectedSamplingPeople[0]
    }
  },
  data() {
    return {
      allsamplingGroup: [
        {
          groupId: '0000-0000-0000-0001',
          groupName: '超能女人',
          isTemp: 'false',
          leaderName: '王霞',
          memberName: '赵启，天女，龙七'
        },
        {
          groupId: '2222-0000-0000-0002',
          groupName: '肾宝男人',
          isTemp: 'false',
          leaderName: '葛优',
          memberName: '郭德纲，宋剑林，王八'
        }
      ],
      groupName: '',
      selectedSamplingPeople: [],
      allSamplingPeople: [
        { Id: '01', Name: '王五' },
        { Id: '02', Name: '赵六' },
        { Id: '03', Name: '王八' },
        { Id: '04', Name: '田七' },
        { Id: '05', Name: '忠告' }
      ],
      isTemporary: false
    }
  },
  methods: {
    groupCreate() {
      if (this.selectedSamplingPeople.length <= 0 || this.groupName === '') {
        this.$message('信息不完整')
        return
      }
      this.createSamplingGroup()
      // 数据库创建group 先跟着SamlingId
    },
    // 删除采样组
    deleteGroup(groupId) {
      this.$confirm('确定删除吗').then(() => {
        this.axios
          .delete('/Sampling/DeleteGroup/', { data: { Guid: groupId } })
          .then(e => {
            this.getAllSamplingGroup()
          })
          .catch(e => e)
      })
    },
    groupTypeChange() {
      if (this.isTemporary) this.isTemporary = false
      else this.isTemporary = true
    },
    // 获取所有采样组
    getAllSamplingGroup() {
      this.axios
        .get('/Sampling/GetGroup/')
        .then(e => {
          this.allsamplingGroup = e.data
        })
        .catch(e => e)
    },
    // 获取所有采样人员
    getAllSamplingMember() {
      this.axios
        .get('/Sampling/GetAllPeopleDetail/')
        .then(e => {
          this.allSamplingPeople = e.data
        })
        .catch(e => e)
    },

    // 创建采样组
    createSamplingGroup() {
      this.axios
        .post('/Sampling/CreateGroup/', {
          groupName: this.groupName,
          isTemp: this.isTemporary,
          memberIds: this.selectedSamplingPeople
        })
        .then(e => {
          this.getAllSamplingGroup()
        })
        .catch(e => e)
    }
  },
  mounted() {
    console.log('s')
    this.getAllSamplingMember()
    this.getAllSamplingGroup()
  }
}
</script>

<style lang="stylus" scoped>
.left
  float left
  width 40%
  height 280px
  overflow auto
.right
  float left
  width 60%
.leftContent
  width 98%
  border 1px solid #eee
  margin-top 5px
.el-checkbox
  margin-left 5px !important
.el-input
  margin-left 5px
  width 60%
.divCreate
  float right
  width 35%
  height 64px
.divPeople
  height 200px
  overflow auto
</style>
